<template>
  <div class="detail" v-for="item in state.detailList" :key="item.id">
    <div
      class="bg_img"
      :style="{
        backgroundImage: 'url(' + item.Imgurl + ')',
        backgroundSize: '100% 100%',
        backgroundRepeat: 'no-repeat',
      }"
    >
      <div class="detail_nav">
        <div @click="tohome">
          <img src="../../public/img/详情页/返回.png" alt="" />
        </div>
        <div>
          <img src="../../public/img/详情页/收藏.png" alt="" />
        </div>
      </div>
      <div class="detail_title">
        <div class="min_img">
          <img :src="item.url" alt="" />
        </div>
        <div class="title_p">
          <p>{{ item.title }}</p>
          <p>
            <span>6月29日限量删档测试</span>
            <span class="ruzhu">开发者入驻</span>
          </p>
        </div>
      </div>
    </div>
    <div class="taptap">
      <div class="taptap_company">
        <p>
          <span>开发</span>
          <span>{{ item.manufact[1] }}</span>
        </p>
        <div class="follow">
          <p>
            <span>预约</span>
            <span>{{ item.attention.replace("+关注", "") }}</span>
          </p>
          <p>
            <span>关注</span>
            <span>{{ item.attention2 }}</span>
          </p>
        </div>
      </div>
      <div class="taptap_score">
        <div>
          <img src="../../public/img/详情页/taptap.png" alt="" />
        </div>
        <div class="color">{{ item.score }}</div>
      </div>
    </div>
    <div class="questionnaire">
      <div class="questionnaire_left">
        <img src="../../public/img/详情页/问卷.png" alt="" />
      </div>
      <div class="questionnaire_right">
        <div class="right_text">首航测试，资格招募中！预邀请调查问卷</div>
        <div class="arrow">
          <img src="../../public/img/详情页/箭头.png" alt="" />
        </div>
      </div>
    </div>
    <div class="subscribe">
      <img src="../../public/img/详情页/预约.png" alt="" />
    </div>
    <div class="middle">
      <div class="middle_follow">
        <img src="../../public/img/详情页/关注.png" alt="" />
        <span>关注</span>
      </div>
      <div>
        <img src="../../public/img/详情页/评价.png" alt="" />
        <span>评价</span>
      </div>
      <div>
        <img src="../../public/img/详情页/论坛.png" alt="" />
        <span>论坛</span>
      </div>
    </div>
    <div class="screenshot">
      <ul>
        <li v-for="(item1, index) in item.middleurl" :key="index">
          <img :src="item1" alt="" />
        </li>
      </ul>
    </div>
    <div class="synopsis">
      <div class="whole">
        <span class="fs">简介</span>
        <span>查看全部</span>
      </div>
      <div class="label">
        <ul>
          <li v-for="value in item.small" :key="value">
            <!-- <img src="../../public/img/详情页/预约榜.png" alt=""> -->
            <p>
              <span>{{ value }}</span>
              <span class="rightarrow"></span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { reactive } from "vue";
// import { useRouter } from "vue-router";
export default {
  props: ["id"],
  setup(props) {
    const state = reactive({
      detailList: [],
    });
    // const router = useRouter();
    axios
      .post("http://121.199.14.205:3000/api/detail", {
        id: props.id,
      })
      .then((response) => {
        state.detailList = response.data.result;
      });
    const tohome = () => {
      // router.push("/home");
      history.go(-1);
    };
    return {
      state,
      tohome,
    };
  },
};
</script>
<style lang="less" scoped>
.detail {
  .bg_img {
    position: relative;
    width: 100%;
    height: 270px;
    /*  background: url(state.detailList[0].imgurl) no-repeat;  */
    .detail_nav {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: space-between;
      padding: 5px 15px;
    }
    .detail_title {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 80px;
      padding: 8px 8px 8px 15px;
      background: rgba(58, 56, 56, 0.7);
      img {
        width: 67px;
        height: 67px;
      }
      .title_p {
        padding: 10px;
        p {
          font-size: 22px;
          color: white;
          span {
            font-size: 12px;
          }
          .ruzhu {
            margin-left: 5px;
            display: inline-block;
            width: 100px;
            background: url(../../public/img/详情页/入驻.png) no-repeat;
            color: #34c3c6;
            text-indent: 18px;
          }
        }
      }
    }
  }
  .taptap {
    display: flex;
    .taptap_company {
      width: 80%;
      p {
        padding: 15px 0px 5px 15px;
        font-size: 12px;
        color: #928f8f;
        font-weight: bold;
        span {
          margin-left: 5px;
        }
        span:nth-of-type(1) {
          color: #cccccc;
        }
      }
      .follow {
        display: flex;
        p {
          padding: 5px 0px 5px 15px;
          span {
            margin-left: 6px;
          }
        }
      }
    }
    .taptap_score {
      width: 20%;
      margin: auto;
      text-align: center;
      .color {
        color: #34c3c6;
      }
    }
  }
  .questionnaire {
    display: flex;
    padding: 5px 15px;
    .questionnaire_left {
      padding: 0px 10px 0px 5px;
      line-height: 45px;
    }
    .questionnaire_right {
      display: flex;
      justify-content: space-between;
      width: 90%;
      height: 40px;
      border-radius: 6px;
      background: #f5f5f5;
      font-size: 12px;
      font-weight: bold;
      .right_text {
        padding: 15px;
      }
      .arrow {
        width: 40px;
        height: 40px;
        line-height: 51px;
        text-align: center;
      }
    }
  }
  .subscribe {
    padding: 2px 18px;
  }
  .middle {
    display: flex;
    padding: 25px 15px 0px 15px;
    div {
      flex: 1;
      text-align: center;
      font-size: 18px;
      color: #34c3c6;
      border-left: 2px solid #cccccc;
      span {
        display: inline-block;
        width: 50px;
      }
    }
    .middle_follow {
      border-left: 0px;
    }
  }
  .screenshot {
    padding: 15px;
    ul {
      display: flex;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      li {
        margin-right: 10px;
        img {
          width: 326px;
          height: 183px;
        }
      }
    }
  }
  .synopsis {
    padding: 10px 15px;
    .whole {
      display: flex;
      justify-content: space-between;
      font-size: 15px;
      font-weight: bold;
      color: #34c3c6;
      .fs {
        font-size: 21px;
      }
    }
    .label {
      padding: 15px 0px 0px 0px;
      ul {
        display: flex;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        li {
          margin-right: 5px;
          p {
            display: flex;
            justify-content: space-evenly;
            // width: 85px;
            padding: 8px;
            text-align: center;
            background-color: #f6f3f3;
            border-radius: 30px;
            color: #9c9c9c;
            span:nth-of-type(1) {
              font-size: 10px;
              width: 40px;
              text-align: center;
              line-height: 20px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .rightarrow {
              display: inline-block;
              width: 14px;
              height: 14px;
              background: url(../../public/img/详情页/右箭头.png) no-repeat 0px
                2px;
              background-size: 14px 14px;
            }
          }
        }
      }
    }
  }
}
</style>
